<script setup lang="ts">
import Player, { SimplePlayer, Events } from "xgplayer";

// 引入es目录下的插件
import Start from "xgplayer/es/plugins/start";
import PC from "xgplayer/es/plugins/pc";
import Mobile from "xgplayer/es/plugins/mobile";
import Progress from "xgplayer/es/plugins/progress";
import Time from "xgplayer/es/plugins/time";
import Play from "xgplayer/es/plugins/play";
import Error from "xgplayer/es/plugins/error";
import Poster from "xgplayer/es/plugins/poster";
import "xgplayer/dist/index.min.css";
import type { IPlayerOptions } from "xgplayer/es/player";
// import { TIME_UPDATE } from "xgplayer/es/events";
// import HlsJsPlugin from "xgplayer-hls";
// import FlvPlugin from "xgplayer-flv";
// import "xgplayer/dist/index.min.css";

const emits = defineEmits<{
  loadeddata: [];
  focus: [];
  blur: [];
  ready: [];
  ended: [];
  error: [];
  play: [];
  click: [e: any, player: Player];
}>();

// 只有 TimeUpdate 事件 执行了才算是真正执行了播放
let isTimeUpdate = false;

/**
 * 扩展封面插件
 */
class PosterPluginExt extends Poster {
  override afterCreate() {
    super.afterCreate();
    console.log(this.config);
    if (!isTimeUpdate) {
      // 很神奇的是，苹果手机中只要设置了 autoPlay 不管视频有没有播放，都会触发 play 事件
      this.on(Events.PLAY, () => {
        setTimeout(() => {
          this.show();
        });
      });
    }
  }
}

/**
 * 扩展手机插件
 */
class MobilePluginExt extends Mobile {
  // 扩展插件点击事件
  override onClick(e: any) {
    super.onClick(e);
    // 点击可以显示隐藏播放按钮
    // this.getPlugin('start').show()
    // 可以单击暂停视频
    // this.switchPlayPause();
    emits("click", e, player);
  }
}

const props = defineProps<{
  url: string;
  initPoster?: string;
}>();

const videoWrapperRef = ref<HTMLDivElement | null>(null);
let player: Player;

const initPlayer = (isHls: boolean = false) => {
  const plugins: any[] = [
    Start,
    MobilePluginExt,
    Progress,
    Play,
    Time,
    Error,
    PC,
    PosterPluginExt,
    // FlvPlugin,
  ];
  if (isHls) {
    // plugins.push(HlsJsPlugin);
  }

  // 有部分手机依旧是不支持m3u8格式
  player = new SimplePlayer({
    id: "mse-video-box",
    url: props.url,
    poster: {
      poster: props.initPoster,
    },
    start: {
      isShowPause: true,
      mode: "auto",
    },
    autoplay: true, // 苹果手机中，如果不设置true,则 LOADED_DATA 事件不会触发，除非开发播放
    height: window.innerHeight,
    width: window.innerWidth,
    plugins: plugins, // 传入需要组装的插件
  });

  player.on(Events.PLAY, () => {
    console.log("play");
    emits(Events.PLAY);
  });

  player.on(Events.LOADED_DATA, () => {
    console.log(Events.LOADED_DATA);
    emits(Events.LOADED_DATA);
  });

  player.on(Events.ENDED, () => {
    emits(Events.ENDED);
  });

  player.on(Events.READY, () => {
    console.log("ready....");
    emits(Events.READY);
  });

  player.on(Events.ERROR, (data) => {
    console.log("player error", data);
    emits(Events.ERROR);
  });

  player.on(Events.TIME_UPDATE, () => {
    console.log("TIME_UPDATE");
    isTimeUpdate = true;
  });

  player.once(Events.TIME_UPDATE, () => {
    console.log("once TIME_UPDATE");
  });

  player.on(Events.PLAYER_FOCUS, () => {
    emits(Events.PLAYER_FOCUS);
  });

  player.on(Events.PLAYER_BLUR, () => {
    console.log("失去焦点");
    emits(Events.PLAYER_BLUR);
  });
};

const playNext = (config: IPlayerOptions) => {
  player?.playNext?.(config);
};

onMounted(() => {
  console.log("url", props.url);
  initPlayer(true);
});

const switchURL = (url: string) => {
  player?.switchURL(url);
};

const pause = () => {
  player?.pause();
};

const getIsActive = () => {
  return player.isActive;
};

const getPlayer = () => {
  return player;
};

defineExpose({
  playNext,
  switchURL,
  pause,
  getIsActive,
  getPlayer,
});
</script>

<template>
  <div ref="videoWrapperRef" class="video-wrapper">
    <div id="mse-video-box" />
  </div>
</template>

<style scoped lang="scss">
.video-wrapper {
  width: 100%;
  height: 100%;
}

#mse-video-box {
  flex: auto;
}
</style>
